<template>
  <div class="live-table">
    <AdvertBar></AdvertBar>
    <h2 class="live-table-title">中国高校在线招生直播排期表</h2>
    <ScrollBar
      @select="onSelect"
    ></ScrollBar>
    <div class="live-list">
      <div
        :key="'live'+index"
        v-for="(live, index) in liveList"
        class="live-box">
        <div class="box-left">
          <img :src="live.schoolLogo" alt="">
          <p class="live-time">{{live.startTime}}~{{live.endTime}}</p>
        </div>
        <div class="box-middle">
          <div class="title-box">
            <h3 class="name">{{live.schoolName}}</h3>
            <h4 class="speaker">主讲人：{{live.explainer}}</h4>
          </div>
          <p class="info clamp3-ellipsis">{{live.introduce}}</p>
        </div>
        <div class="box-right">
          <div class="state" :class="{'progressive': live.status === '1'}">
            <!--            0 未开始  1、直播中 2、已结束-->
            <span v-if="live.status === '0'">未开始</span>
            <span v-if="live.status === '1'">直播中</span>
            <span v-if="live.status === '2'">已结束</span>
          </div>
          <div
            @click="goLivePlay(live)"
            class="play-btn" :class="{past:live.status === '0',progressive:live.status === '1'}">
            <span v-if="live.status === '0'">敬请期待</span>
            <span v-if="live.status === '1'">观看直播</span>
            <span v-if="live.status === '2'">观看回放</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import AdvertBar from '../../components/AdvertBar'
  import ScrollBar from './comp/ScrollBar'

  export default {
    name: 'LiveTable',
    components: {
      AdvertBar,
      ScrollBar
    },
    data () {
      return {
        liveList: []
      }
    },
    methods: {
      // 直播跳转检查直播码
      handleVideoClick (id) {
        return this.$http.get('/liveVideoController/clickVideoByUser', { id })
      },
      // 跳转直播
      goLivePlay ({ id, title }) {
        this.handleVideoClick(id).then(value => {
          if (value.status === 501) {
            return
          }
          if (value.status === 2004 || value.status === 2005) {
            this.$router.push({
              path: '/liveDetail',
              query: { id, title }
            })
            return
          }
          if (value.state === 2) {
            window.open(`#/videoPlay?title=${title}&videoUrl=${value.backUrl}`)
          } else {
            window.open(value.url)
          }
        })
      },
      onSelect (realTime) {
        this.$http.get('/liveVideoController/getVideoDetailByDate', {
          realTime
        }).then(value => {
          // "id": "4",
          // "startTime": "19:00",
          // "endTime": "20:59",
          // "schoolName": "武汉大学",
          // "schoolLogo": "http://zyfiles.ubzyw.com/res/1509706473644.png",
          // "explainer": "tom",
          // "introduce": "1111",
          // "url": null,
          // "backUrl": null,
          // "status": "0 未开始  1、直播中 2、已结束",
          this.liveList = value
        })
      },
    }
  }
</script>

<style scoped lang="less">
  .live-table {
    .live-table-title {
      font-size: 22px;
      color: #1F2329;
      margin-top: 30px;
    }

    .live-list {
      margin-top: 27px;
    }

    .live-box {
      width: 1164px;
      height: 157px;
      border: 1px solid #EFF0F1;
      box-sizing: border-box;
      padding: 0 20px;
      display: flex;
      align-items: center;
      margin-bottom: 20px;
      &:hover{
        background: #F5F6F7;
      }
      .box-left {
        width: 100px;
        text-align: center;

        img {
          width: 60px;
          height: 60px;
          border-radius: 100%;
          margin-bottom: 10px;
        }

        .live-time {
          color: #1F2329;
        }
      }

      .box-middle {
        flex: 1;
        margin: 0 20px;
        height: 100px;
        .title-box {
          display: flex;
          justify-content: space-between;
          align-items: flex-end;

          .name {
            font-size: 22px;
            color: #1F2329;
          }

          .speaker {
            color: #1F2329;
          }
        }

        .info {
          font-size: 14px;
          color: #646A73;
          margin-top: 14px;
        }
      }

      .box-right {
        width: 100px;

        .state {
          color: #9CA2A9;
          text-align: center;
          margin-bottom: 30px;

          &.progressive {
            color: #34C724;
          }
        }
      }
    }

    .play-btn {
      cursor: pointer;
      width: 96px;
      height: 32px;
      text-align: center;
      line-height: 32px;
      border-radius: 4px;
      background: #E4E5E7;
      color: #9CA2A9;

      &.past {
        background: #FF8800;
        color: #fff;
      }

      &.progressive {
        background: #FF6B51;
        color: #fff;
      }
    }
  }
</style>
